<template>
  <div class="hasCheckbox">
    <div>
      <search-form-data @search="handleSearch" />
    </div>
    <div class="btn item">
      <el-button type="primary" icon="el-icon-plus" size="small" @click="addProject">新增方案</el-button>
      <el-button icon="el-icon-delete" size="small" @click="handleSelectDel">删除</el-button>
      <el-button icon="el-icon-upload2" size="small" @click="handleMultipleChangeStatus(LIST_STATE.ON)">上架</el-button>
      <el-button icon="el-icon-download" size="small" @click="handleMultipleChangeStatus(LIST_STATE.OFF)">下架</el-button>
    </div>
    <table-panel
      ref="OrderMessageTableRef"
      :table-data="tableData"
      :table-head="column"
      :checkbox="true"
      :border="true"
      @selection-change="handleSelectChange"
    >
      <template #imgUrl="{ scope }">
        <div class="imgs">
          <img :src="fileBaseUrl + scope.image" alt="">
        </div>
      </template>

      <template #maxPrice="{ scope }">
        <template v-if="scope.minPrice===scope.maxPrice">
          {{ scope.minPrice / 100 }}
        </template>
        <template v-else>
          {{ scope.minPrice / 100 }}~{{ scope.maxPrice / 100 }}
        </template>
      </template>

      <template #status="{ scope }">
        <el-switch
          v-model="scope.status"
          :active-value="LIST_STATE.ON"
          :inactive-value="LIST_STATE.OFF"
          @change="handleChangeAppointmentCategory(scope)"
        />
      </template>

      <template #opr="{ scope }">
        <el-button
          type="text"
          @click="handleEditResource(scope)"
        >编辑</el-button>
        <el-button
          type="text"
          @click="handleEditResource(scope)"
        >推广</el-button>
        <el-button
          type="text"
          @click="handleDelResource(scope)"
        >删除</el-button>
      </template>
    </table-panel>
    <div class="footer">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="params.pageSize"
        :current-page="params.pageNum"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import searchFormData from '../../components/searchFormData'
import tablePanel from '../../../../components/TablePanel'
import { column, LIST_STATE } from '../../config'
import {
  delAppointmentPlanDetail,
  getAppointmentPlanQryLis,
  updateAppointmentPlanStatus
} from '@/api/reservation'

export default {
  name: 'TableData',
  components: { tablePanel, searchFormData },
  data() {
    return {
      LIST_STATE,
      column,
      tableData: [],
      tempSelectList: [],
      params: {
        name: '',
        pageNum: 1,
        pageSize: 10,
        status: ''
      },
      total: 0
    }
  },
  mounted() {
    this.fetchData()
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  methods: {
    async fetchData(isClear = false) {
      if (isClear) {
        this.params = {
          name: '',
          pageNum: 1,
          pageSize: 10,
          status: ''
        }
      }
      const { code, data } = await getAppointmentPlanQryLis(this.params)
      if (code === 0) {
        const { total, list } = data
        this.total = total
        this.tableData = list
      }
      console.log('请求')
    },
    handleSelectChange(val) {
      this.tempSelectList = val
    },
    handleSearch(val) {
      this.params = {
        ...this.params,
        ...val,
        pageNum: 1,
        pageSize: 10
      }
      this.fetchData()
    },
    handlePageChange(e) {
      this.params.pageNum = e
      this.fetchData()
    },
    async handleDelResource({ id }) {
      const { code } = await delAppointmentPlanDetail({ id })
      if (code === 0) {
        this.$message.success('删除成功!')
        await this.fetchData(true)
      }
    },
    handleMultipleChangeStatus(status) {
      let len = this.tempSelectList.length
      if (len === 0) {
        this.$message.warning('请选择后再删除!')
        return
      }
      this.tempSelectList.map((v) => {
        updateAppointmentPlanStatus({ id: v.id, status }).then((res) => {
          const { code } = res
          if (code === 0) len--
          if (len === 0) {
            this.$message.success(`批量${status === LIST_STATE.ON ? '上架' : '下架'}成功`)
            this.fetchData(true)
            this.tempSelectList = []
          }
        })
      })
    },
    async handleChangeAppointmentCategory({ id, status }) {
      const { code } = await updateAppointmentPlanStatus({ id, status })
      if (code === 0) {
        this.$message.success('成功!')
        await this.fetchData()
      }
    },
    handleSelectDel() {
      let len = this.tempSelectList.length
      if (len === 0) {
        this.$message.warning('请选择后再删除!')
        return
      }
      this.tempSelectList.map((v) => {
        delAppointmentPlanDetail({ id: v.id }).then((res) => {
          const { code } = res
          if (code === 0) len--
          if (len === 0) {
            this.$message.success('批量删除成功!')
            this.fetchData(true)
            this.tempSelectList = []
          }
        })
      })
    },
    handleEditResource(scope) {
      this.$emit('edit', scope)
    },
    addProject() {
      this.$emit('add')
    }
  }
}
</script>

<style scoped lang="scss">
.item {
  margin: 10px 0;
}
.imgs{
  width: 160px;
  height: 120px;
  object-fit: cover;
}
</style>
